import React from "react";

/**
 * Context 使用
 *
 * 1 调用 React.createContext() 创建 Provider Consumer 这两个组件
 * 2 使用 Provider 包裹你想跨组件通讯的组件
 * 3 传递想要跨组件通许的数据
 * 4 使用 Consumer 组件接收数据“{ (data) => {}}”
 */

// 调用 React.createContext() 创建 Provider Consumer 这两个组件
const { Provider, Consumer } = React.createContext();

// 根组件
class App extends React.Component {
  render() {
    return (
      // 使用 Provider 包裹你想跨组件通讯的组件
      // 传递想要跨组件通许的数据
      <Provider value={"pink"}>
        <div>
          <h1>根组件</h1>
          <hr />
          <Node />
        </div>
      </Provider>
    );
  }
}

// 第一个节点, 子组件
const Node = (props) => {
  return (
    <div>
      <h2>子组件</h2>
      <hr />
      <SubNode />
    </div>
  );
};

// 第一个节点的子节点，孙子节点
const SubNode = (props) => {
  return (
    <div>
      <h3>孙子组件</h3>
      {/* 使用 Consumer 组件接收数据 */}
      <Consumer>
        {(data) => {
          return <p>{data}</p>;
        }}
      </Consumer>
      <hr />
    </div>
  );
};

export default App;
